<template>
    <div class="common-header">
        <div class="main">
            <div class="left">
                <div class="logo">
                    <img class="logo-img" @click="jumpTo('/')" src="../assets/img/logo.png" />
                </div>
                <div class="index-text">首页</div>
                <div class="type-box">
                    <div class="active-box" @mouseover="showType" @mouseout="hideType">
                        <span class="chose">全部分类</span>
                        <i class="angle angle-down"></i>
                    </div>
                    <div class="type-list" v-show="typeFlag" @mouseover="showType" @mouseout="hideType">
                        <div class="type-item active">全部分类</div>
                        <div class="type-item">分类分类1</div>
                        <div class="type-item">分类分类2</div>
                        <div class="type-item">分类分类3</div>
                        <div class="type-item">分类分类4</div>
                        <div class="type-item">分类分类5</div>
                    </div>
                </div>
                <div class="search-form">
                    <input class="search-input" type="text" placeholder="请输入关键字搜索..." />
                    <span class="search-btn">
                        <img class="search-icon" src="../assets/img/icon/white-search.png" />
                        <span class="search-text">搜索</span>
                    </span>
                </div>
            </div>
            <div class="right">
                <login-info></login-info>
            </div>
        </div>
    </div>
</template>

<script>
import loginInfo from './loginInfo'
export default {
    components:{
        loginInfo
    },
    data() {
        return {
            typeFlag:false,
            typeTimer:null
        };
    },
    methods: {
        showType(){
            if (this.typeTimer) {
                clearTimeout(this.typeTimer);
                this.typeTimer = null;
            }
            this.typeFlag = true;
        },
        hideType(){
            let typeTimer = setTimeout(()=>{
                this.typeFlag = false;
                clearTimeout(this.typeTimer);
                this.typeTimer = null;
            },1500);
            this.typeTimer = typeTimer;
        },
        jumpTo(path){
            this.$router.push(path).catch(err=>{
                // console.log(err)
            })
        }
    }
};
</script>

<style lang="less" scoped>
.common-header {
    width: 100%;
    background:#FFFFFF;
    .main {
        width: @max-width;
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding:30px 0;
        .left {
            width:80%;
            display:flex;
            align-items:center;
            justify-content: space-between;
            .logo{
                width:258px;
                height:68px;
                .logo-img{
                    width:100%;
                    height:100%;
                    cursor: pointer;
                }
            }
            .index-text{
                font-size:@main-font-size;
                color:@main-font-color;
            }
            .type-box{
                position:relative;
                font-size:@main-font-size;
                color:@main-font-color;
                .active-box{
                    .chose{
                        display:inline-block;
                        vertical-align: middle;
                        margin-right:8px;
                    }
                }
                .type-list{
                    width:120px;
                    position:absolute;
                    top:30px;
                    left:-30px;
                    background:#ffffff;
                    z-index:5;
                    padding:12px;
                    border-radius:6px;
                    .type-item{
                        text-align:center;
                        line-height:2;
                        cursor: pointer;
                    }
                    .type-item.active{
                        color:@main-color;
                    }
                    .type-item:hover{
                        color:@main-color;
                    }
                }
            }
            .search-form {
                font-size: 0;
                width:54%;
                .search-input {
                    width: 80%;
                    font-size: @main-font-size;
                    outline: none;
                    border: 0;
                    box-sizing: border-box;
                    height: 38px;
                    line-height: 54px;
                    padding: 0px 40px;
                    background: #ededf0;
                    border-bottom-left-radius: 50px;
                    border-top-left-radius: 50px;
                    color: @main-font-color;
                    vertical-align: middle;
                }
                .search-btn {
                    display: inline-block;
                    vertical-align: middle;
                    width: 20%;
                    font-size: @main-font-size;
                    outline: none;
                    border: 0;
                    box-sizing: border-box;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    background: linear-gradient(
                        45deg,
                        #fda912 0%,
                        #f18316 100%
                    );
                    border-bottom-right-radius: 50px;
                    border-top-right-radius: 50px;
                    color: #ffffff;
                    cursor: pointer;
                    .search-icon {
                        width: 20px;
                        height: 20px;
                        vertical-align: middle;
                        margin-right: 6px;
                    }
                    .search-text {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }
        }
        .right {
            position:relative;
            width:20%;
            display:flex;
            align-items: center;
            justify-content: flex-end;
            .login-info {
            }
        }
    }
}
</style>